<template>
  <el-dialog title="裁切图片" :visible="dialogVisible" @close="$emit('update:visible',false)" :close-on-click-modal="false"
             :width="width" append-to-body>
    <div class="dialog_conwrap">
      <!-- 遮罩层 -->
      <p class="infoDesc"><i class="el-icon-warning-outline"></i>图片建议尺寸：{{imgstatus[imgSize].text}}，宽高均小于4000，大小2M以内，类型必须是.gif,jpeg,jpg,png,bmp中的一种。
      </p>
      <div class="cropper_body">
        <div class="cropper_left">
          <p class="cropper_titlename">裁剪操作</p>
          <div class="cropperContainer">
            <div class="cropper-line-body">
              <img id="corpperimage" src="@/assets/imageAdmin/noneImg.png" alt="Picture">
            </div>
          </div>
        </div>
        <div class="cropper_right">
          <p class="cropper_titlename">裁剪预览</p>
          <div class="preview-body">
            <div class="preview"></div>
          </div>
        </div>
      </div>
      <div style="height: 0;overflow: hidden;">
        <div style="margin-top:20px;text-align: left;">
          <input type="file" id="change" :accept="imgCropperData.accept" @change="change">
          <label for="change"></label>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer f-footer">
      <span class="f-footer-l">
        <el-button class="uploadImgIcon" @click="chooseImg" size="small">上传 <i class="el-icon-upload"></i></el-button>
        <el-button icon="el-icon-plus" @click="zoomFn(0)" size="small"></el-button>
        <el-button icon="el-icon-minus" @click="zoomFn(1)" size="small"></el-button>
        <el-button icon="el-icon-refresh-right" @click="rotateFn(0)" size="small"></el-button>
        <el-button icon="el-icon-refresh-left" @click="rotateFn(1)" size="small"></el-button>
      </span>
      <span class="f-footer-r">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="commit" size="small">确 定</el-button>
      </span>
    </span>
  </el-dialog>
</template>
<script>
import Cropper from 'cropperjs'
import api from '@/utils/api.js'
// 名片封面

export default {
  name: 'corpperLebel',
  props: ['visible', 'imgSize'],
  data () {
    return {
      width: '750px',
      dialogVisible: this.visible,
      picValue: '',
      cropper: '',
      croppable: false,
      panel: false,
      url: '/',
      imgCropperData: {
        accept: 'image/gif, image/jpeg, image/png, image/jpg'
      },
      imgstatus: [
        {text: '295*413', long: 295, wide: 413}, // 0 学生头像 家长头像
        {text: '200*200', long: 200, wide: 200} // 1 教辅具缩略图
      ],
      filename: ''
    }
  },
  created () {
    console.log('进入页面裁切', this.imgSize)
  },
  mounted () {
    // 初始化这个裁剪框
    this.$nextTick(function () {
      let self = this
      let image = document.getElementById('corpperimage')
      self.cropper = new Cropper(image, {
        modal: true, // 黑色低层
        guides: false, // 虚线
        highlight: false,
        aspectRatio: this.imgstatus[this.imgSize].long / this.imgstatus[this.imgSize].wide, // 710*1048
        autoCropArea: 1,
        dragMode: 'move',
        viewMode: 0,
        zoomable: true,
        zoomOnWheel: true,
        preview: '.preview',
        rotatable: true, // 启用旋转图像
        scalable: true, // 启用缩放图像
        autoCrop: false,
        ready () {
          console.log('数据初始化')
          self.croppable = true
        },
        crop (event) {
          // 画布更改执行
        }
      })
    })
  },
  methods: {
    // 选择图片
    chooseImg () {
      document.getElementById('change').click()
    },
    // 取消上传
    cancel () {
      this.panel = false
      let obj = document.getElementById('change')
      obj.outerHTML = obj.outerHTML
    },
    // 创建url路径
    getObjectURL (file) {
      let url = null
      if (window.createObjectURL != undefined) {
        // basic
        url = window.createObjectURL(file)
      } else if (window.URL != undefined) {
        // mozilla(firefox)
        url = window.URL.createObjectURL(file)
      } else if (window.webkitURL != undefined) {
        // webkit or chrome
        url = window.webkitURL.createObjectURL(file)
      }
      return url
    },
    zoomFn (option) {
      if (option === 1) {
        this.cropper.zoom(-0.1)
      } else {
        this.cropper.zoom(0.1)
      }
    },
    rotateFn (option) {
      if (option === 0) {
        this.cropper.rotate(90)
      } else {
        this.cropper.rotate(-90)
      }
    },
    change (e) {
      let files = e.target.files || e.dataTransfer.files
      console.log('图片格式：', files)
      if (!files.length) return
      let type = files[0].type // 文件的类型，判断是否是图片
      let size = files[0].size // 文件的大小，判断图片的大小
      this.filename = files[0].name
      if (this.imgCropperData.accept.indexOf(type) == -1) {
        return false
      }
      // if (size > 5242880) {
      //   this.$message.error('图片大小超出4M')
      //   return false
      // }

      this.picValue = files[0]
      this.url = this.getObjectURL(this.picValue)
      // 每次替换图片要重新得到新的url
      if (this.cropper) {
        this.cropper.replace(this.url)
      }

      let image = document.getElementById('corpperimage')
      image.addEventListener('ready', function () {
        this.cropper.crop()
      })
      this.panel = true
    },
    // 确定提交
    commit () {
      let that = this;
      this.panel = false
      let croppedCanvas
      if (!this.croppable) {
        return
      }

      croppedCanvas = this.cropper.getCroppedCanvas()
      // Round
      // roundedCanvas = this.getRoundedCanvas(croppedCanvas);
      // this.headerImage = roundedCanvas.toDataURL();

      this.cropper.getCroppedCanvas().toBlob((blob) => {
        const formData = new FormData();
        formData.append("file", blob, that.filename);
        // console.log('formData:', formData)
        // formData.append("token",sessionStorage.getItem("token"))
        this.axios
            .post(that.$uploadImg, formData)
            .then(response => {
              console.log('图片回执：', response)
              if (response.data.code == 0) {
                that.$emit('imgAddBack', response.data.data.name)
                that.dialogVisible = false
              } else {
              }
            })
            .catch(response => {
            })
      })
    }
  }
}
</script>
<style>
.f-footer {
  display: flex;
}

.f-footer-l {
  flex: 1;
  text-align: left;
}

.uploadImgIcon {
  background: #1aad19;
  color: #fff;
  border: 1px solid #1aad19;
}

.cropper_body {
  display: flex;
}

.cropper_left {
  /*width: 350px;*/
  /*height: 350px;*/
}

.cropper_right {
  /*width: 350px;*/
  /*height: 350px;*/
  margin-left: 10px;
}

.cropper_titlename {
  height: 40px;
  line-height: 40px;
}

.preview {
  width: 350px;
  height: 350px;
  overflow: hidden;
}

.preview-body {
  width: 350px;
  height: 350px;
  background: #eee;
}

.infoDesc {
  color: red;
}

* {
  margin: 0;
  padding: 0;
}

.cropper-img-body {
  width: 400px;
  height: 400px;
}

#demo #button {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 80px;
  height: 40px;
  border: none;
  border-radius: 5px;
  background: white;
}

#demo .show {
  width: 100px;
  height: 100px;
  overflow: hidden;
  position: relative;
  /*border-radius: 50%;*/
  border: 1px solid #d5d5d5;
}

#demo .picture {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.cropper-line-body {
  width: 350px;
  height: 350px;
}

#demo #image {
  max-width: 100%;
}

#corpperimage {
  max-width: 100%;
}

/*!
 * Cropper.js v1.0.0-rc
 * https://github.com/fengyuanchen/cropperjs
 *
 * Copyright (c) 2017 Fengyuan Chen
 * Released under the MIT license
 *
 * Date: 2017-03-25T12:02:21.062Z
 */
.cropper-container {
  font-size: 0;
  line-height: 0;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  direction: ltr;
  -ms-touch-action: none;
  touch-action: none
}

.cropper-container img {
  display: block;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  width: 100%;
  height: 100%;
  image-orientation: 0deg
}

.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.cropper-wrap-box {
  overflow: hidden;
}

.cropper-drag-box {
  opacity: 0;
  background-color: #fff;
}

.cropper-modal {
  opacity: .5;
  background-color: #000;
}

.cropper-view-box {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
  outline: 1px solid #39f;
  outline-color: rgba(51, 153, 255, 0.75);
}

.cropper-dashed {
  position: absolute;
  display: block;
  opacity: .5;
  border: 0 dashed #eee
}

.cropper-dashed.dashed-h {
  top: 33.33333%;
  left: 0;
  width: 100%;
  height: 33.33333%;
  border-top-width: 1px;
  border-bottom-width: 1px
}

.cropper-dashed.dashed-v {
  top: 0;
  left: 33.33333%;
  width: 33.33333%;
  height: 100%;
  border-right-width: 1px;
  border-left-width: 1px
}

.cropper-center {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 0;
  height: 0;
  opacity: .75
}

.cropper-center:before,
.cropper-center:after {
  position: absolute;
  display: block;
  content: ' ';
  background-color: #eee
}

.cropper-center:before {
  top: 0;
  left: -3px;
  width: 7px;
  height: 1px
}

.cropper-center:after {
  top: -3px;
  left: 0;
  width: 1px;
  height: 7px
}

.cropper-face,
.cropper-line,
.cropper-point {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  opacity: .1;
}

.cropper-face {
  top: 0;
  left: 0;
  background-color: #fff;
}

.cropper-line {
  background-color: #39f
}

.cropper-line.line-e {
  top: 0;
  right: -3px;
  width: 5px;
  cursor: e-resize
}

.cropper-line.line-n {
  top: -3px;
  left: 0;
  height: 5px;
  cursor: n-resize
}

.cropper-line.line-w {
  top: 0;
  left: -3px;
  width: 5px;
  cursor: w-resize
}

.cropper-line.line-s {
  bottom: -3px;
  left: 0;
  height: 5px;
  cursor: s-resize
}

.cropper-point {
  width: 5px;
  height: 5px;
  opacity: .75;
  background-color: #39f
}

.cropper-point.point-e {
  top: 50%;
  right: -3px;
  margin-top: -3px;
  cursor: e-resize
}

.cropper-point.point-n {
  top: -3px;
  left: 50%;
  margin-left: -3px;
  cursor: n-resize
}

.cropper-point.point-w {
  top: 50%;
  left: -3px;
  margin-top: -3px;
  cursor: w-resize
}

.cropper-point.point-s {
  bottom: -3px;
  left: 50%;
  margin-left: -3px;
  cursor: s-resize
}

.cropper-point.point-ne {
  top: -3px;
  right: -3px;
  cursor: ne-resize
}

.cropper-point.point-nw {
  top: -3px;
  left: -3px;
  cursor: nw-resize
}

.cropper-point.point-sw {
  bottom: -3px;
  left: -3px;
  cursor: sw-resize
}

.cropper-point.point-se {
  right: -3px;
  bottom: -3px;
  width: 20px;
  height: 20px;
  cursor: se-resize;
  opacity: 1
}

@media (min-width: 768px) {
  .cropper-point.point-se {
    width: 15px;
    height: 15px
  }
}

@media (min-width: 992px) {
  .cropper-point.point-se {
    width: 10px;
    height: 10px
  }
}

@media (min-width: 1200px) {
  .cropper-point.point-se {
    width: 5px;
    height: 5px;
    opacity: .75
  }
}

.cropper-point.point-se:before {
  position: absolute;
  right: -50%;
  bottom: -50%;
  display: block;
  width: 200%;
  height: 200%;
  content: ' ';
  opacity: 0;
  background-color: #39f
}

.cropper-invisible {
  opacity: 0;
}

.cropper-bg {
  background-image: url('');
}

.cropper-hide {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
}

.cropper-hidden {
  display: none !important;
}

.cropper-move {
  cursor: move;
}

.cropper-crop {
  cursor: crosshair;
}

.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
  cursor: not-allowed;
}
</style>


